﻿@page
@model ToolGood.FlowVision.Pages.Members.Flow.FormulaEditorModel
@{
    Layout = "~/Pages/Shared/_Layout_Edit.cshtml";
}
@section css{
    <style>
        .layui-table td, .layui-table th { padding: 3px; }
        .layui-form-item .layui-form-checkbox[lay-skin=primary] { margin-top: 5px; margin-bottom: 5px; }
        .editor { top: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
        .ace_text-layer .ace_rightAlignedText .ace-cjk { font-size: 12px !important; }
        div.layui-input.editor-div { padding: 0; height: initial }
        div.layui-input.editor-div2 { padding: 0; display: inline-block; width: calc(100% - 38px); height: initial }
    </style>
}

<div style="overflow-x:hidden;background-color:#f3f3f4;height: 100%;">
    <form id="edit-form" style="height: 100%;">
        <div class="layui-form layui-form-sm" lay-filter="form" style="padding: 20px 30px 0 0;">
            <div class="layui-form-item-sm">
                <label class="layui-form-label-sm">变量名称<span class="red"> *</span></label>
                <div class="layui-input-block-sm">
                    <input type="text" class="layui-input layui-input-sm" id="txt_name" name="name" autocomplete="on">
                </div>
            </div>
            <div class="layui-form-item-sm">
                <label class="layui-form-label-sm">类型</label>
                <div class="layui-input-block-sm">
                    <input type="checkbox" name="type" lay-skin="primary" id="type_number" value="number" title="数字" lay-filter="type" />
                    <input type="checkbox" name="type" lay-skin="primary" id="type_bool" value="bool" title="布尔值" lay-filter="type" />
                    <input type="checkbox" name="type" lay-skin="primary" id="type_string" value="string" title="文本" lay-filter="type" />
                    <input type="checkbox" name="type" lay-skin="primary" id="type_date" value="date" title="时间" lay-filter="type" />
                    <input type="checkbox" name="type" lay-skin="primary" id="type_set" value="list" title="集合" lay-filter="type" />
                </div>
            </div>
            <div class="layui-form-item-sm">
                <label class="layui-form-label-sm">条件公式</label>
                <div class="layui-input-block-sm">
                    <table id="list" class="layui-table" lay-size="sm">
                        <tr ondrop="onDrop(event)" ondragstart="dragStart(event)" ondragover="onDragOver(event)" draggable="false" ondragenter="dragEnter(event)">
                            <td>内容</td>
                            <td width="40">操作</td>
                        </tr>
                    </table>
                    <a href="javascript:;" onclick="addCondition()" style="color:blue">增加条件公式</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;注：条件顺序：从上到下
                </div>
            </div>
            <div class="layui-form-item-sm">
                <label class="layui-form-label-sm">默认公式<span class="red"> *</span></label>
                <div class="layui-input-block-sm">
                    <input type="hidden" id="txt_defaultFormula" name="defaultFormula" />
                    <div class="layui-input editor-div">
                        <div id="txt_defaultFormula-editor" class="editor"> </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item-sm">
                <label class="layui-form-label-sm">备注</label>
                <div class="layui-input-block-sm">
                    <textarea class="layui-textarea" id="txt_comment" name="comment" autocomplete="off"></textarea>
                </div>
            </div>
            <div class="layui-form-item-sm" id="modifyInfo" style="display:none;">
                <label class="layui-form-label-sm">编辑于</label>
                <div class="layui-input-block-sm" style="line-height: 30px;">
                    <span id="modifyText"></span>
                </div>
            </div>
            <div class="layui-form-item-sm" style="text-align:center;padding-left: 30px;">
                <button pass-edit="@Model.ButtonPass" type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="save(this,true);"> &nbsp;&nbsp; 提 交 &nbsp;&nbsp; </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="closeWindow();"> &nbsp;&nbsp; 关 闭 &nbsp;&nbsp; </button>
            </div>
        </div>
        <div style="height:5px;"></div>
    </form>
</div>

<script type="text/x-template" id="tpl" style="display:none">
    <tr ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragenter="dragEnter(event)"  draggable="true" ondragstart="dragStart(event)">
        <td>
            <label style="top: 15px;">条件：</label>
            <input type="hidden" id="txt_conditionXXXX" name="conditions[XXXX].condition" />
            <div class="layui-input editor-div2">
                <div id="txt_condition-editorXXXX" class="editor"> </div>
            </div><br />
            <label style="top: 58px;">公式：</label>
            <input type="hidden" id="txt_formulaXXXX" name="conditions[XXXX].formula" />
            <div class="layui-input editor-div2">
                <div id="txt_formula-editorXXXX" class="editor"> </div>
            </div>
        </td>
        <td>
            <span style="color:blue;cursor:all-scroll;"  >拖动</span><br style="margin-bottom: 5px;" />
            <a class="delete" href="javascript:;">删除</a>
        </td>
    </tr>
</script>

@section js{
    <script src="/_/inputcontrol/toolgood.algorithm.js"></script>
    <script src="/_/inputcontrol/ace/ace.js"></script>
    <script src="/_/inputcontrol/ace/ext-language_tools.js"></script>
    <script src="/_/inputcontrol/AceKeywords.js?pid=@(Model.ProjectId)&appid=@(Model.AppId)"></script>
    <script src="/_/inputcontrol/my-keywords.js"></script>
    <script src="/_/inputcontrol/createeditor.js"></script>
    <script>
        layui.use(['element', 'form'], function () {
            var form = layui.form;
            form.on('checkbox(type)', function (data) {
                $("input[name='type']").prop("checked", false);
                $(this).prop("checked", true);
                form.render('checkbox');
            });
            form.render('checkbox');
        });
    </script>
    <script>
        function addCondition() {
            var html = $("#tpl").html();
            var t = new Date().valueOf();
            html = html.replace(/XXXX/ig, t);
            $("#list").append($(html));
            createEditor("txt_condition-editor" + t, "txt_condition" + t)
            createEditor("txt_formula-editor" + t, "txt_formula" + t)
        }
        $(document).on("click", ".delete", function (event) {
            event && event.stopPropagation();
            $this = $(this);
            if (top.$("a.layui-layer-btn0").length > 0) {
                $this.parents("tr").remove();
                top.layer.close(top.$(".layui-layer-dialog").attr("times"));
            } else {
                top.layer.confirm('删除当前的选择项吗?', function (index) {
                    $this.parents("tr").remove();
                    top.layer.close(index);
                })
            }
            return false;
        });
    </script>

    <script>
        $(function () {
            var data = top.window.getSettingFormula();
            if (!data.conditions) data.conditions = []
            if (!data.type) data.type = "number"

            $("#txt_name").val(data.name);
            $("#txt_defaultFormula").val(data.defaultFormula.trim());
            $("#txt_comment").val(data.comment);

            $("#type_" + data.type).prop("checked", true);
            layui.use(["form"], function () { layui.form.render('checkbox'); });


            for (var i = 0; i < data.conditions.length; i++) {
                var html = $("#tpl").html();
                var t = new Date().valueOf();
                html = html.replace(/XXXX/ig, i);
                $("#list").append($(html));
                $("#txt_condition" + i).val(data.conditions[i].condition.trim());
                $("#txt_formula" + i).val(data.conditions[i].formula.trim());
                createEditor("txt_condition-editor" + i, "txt_condition" + i)
                createEditor("txt_formula-editor" + i, "txt_formula" + i)
            }

            createEditor("txt_defaultFormula-editor", "txt_defaultFormula")

            if (data && data.modifyDate && data.modifyUser) {
                $("#modifyText").text(data.modifyDate + ", " + data.modifyUser)
                $("#modifyInfo").show();
            }
        })
        $(window).keydown(function (e) {
            if (e.keyCode == 83 && e.ctrlKey) {
                e.preventDefault();
                save(null, false);
                top.window.saveGraph();
                return false;
            }
        });
        function save(obj, isclose) {
            if ($("#txt_name").val().length < 1) { layer.alert("请输入变量名称"); $("#txt_name").focus(); return; }
            if ($("#txt_defaultFormula").val().length < 1) { layer.alert("请输入默认公式"); $("#txt_defaultFormula").focus(); return; }
            var name = $("#txt_name").val().toLowerCase();
            if (/^[\d].*/ig.test(name)) { layer.alert("变量名称有误"); $("#txt_name").focus(); return; }
            if (/[ \t\+\-\*\/\(\)\\\[\]]/ig.test(name)) { layer.alert("变量名称有误"); $("#txt_name").focus(); return; }
            for (var i = 0; i < ace_keywords2.length; i++) {
                if (ace_keywords2[i]["key"].toLowerCase() == name) { layer.alert("变量名称有误,不能使用当前变量名"); $("#txt_name").focus(); return; }
            }

            var data = $("#edit-form").serializeJson();
            if (data.conditions) {
                for (var i = 0; i < data.conditions.length; i++) {
                    if (data.conditions[i].condition.length < 1) { layer.alert("请输入条件"); return; }
                    if (data.conditions[i].formula.length < 1) { layer.alert("请输入公式"); return; }
                }
            }
            var now = new Date();
            data.modifyDate = now.getFullYear() + "-" + (now.getMonth() + 1) + "-"+now.getDay() + " " + now.getHours() + ":"+now.getMinutes() + ":" + now.getSeconds();
            data.modifyUser = "@Model.MemberDto.Name";

            top.window.setSettingFormula(data);
            top.window.SettingFormulaSave();

            top.window.saveGraph();
            if (isclose) { closeWindow(); }
        }


    </script>

    <script>
        let moveNode = null;
        function onLeave(event) { }
        function onDrop(event) {
            event.preventDefault();
            moveNode.style.opacity = '1';
            if ($(event.target).parents("table")[0] != $(moveNode).parents("table")[0]) { return; }
            if (event.target.parentNode.tagName == "TR") {
                if (moveNode.tagName == "TR") {
                    $(event.target.parentNode).after($(moveNode))
                } else {
                    $(event.target.parentNode).after($(moveNode).parents("tr"))
                }
            }
        }
        function onDragEnter(event) { event.preventDefault(); }
        function onDrag(event) { event.preventDefault(); }
        function onDragOver(event) { event.preventDefault(); }
        function dragStart(event) { moveNode = event.target; event.target.style.opacity = '0.5'; }
        function dragEnter(event) {
            if ($(event.target).parents("table")[0] != $(moveNode).parents("table")[0]) { return; }
            if (event.target.parentNode.tagName == "TR") {
                if (moveNode.tagName == "TR") {
                    $(event.target.parentNode).after($(moveNode))
                } else {
                    $(event.target.parentNode).after($(moveNode).parents("tr"))
                }
            } else {
                event.preventDefault();
            }
        }
    </script>
}